<template>
	<!-- loading -->
	<view v-if="loadingIcon" class="box">
		<view class="kuang">
			<view class="flex-column-between">
				<view class="w-100% h-46rpx"></view>
				<image class="loading"
					src="//image01.homedo.com/Files/Images/cms/www/20230601/5403736490286410852_pic1.png" mode="">
				</image>
				<view class="w-100% h-26rpx"></view>
				<view class="text">{{loadingText}}</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { defineProps, toRefs } from 'vue'
	const props = defineProps({
		loadingText: String,
		loadingIcon: Boolean
	})
	const loadingText = toRefs(props).loadingText
	const loadingIcon = toRefs(props).loadingIcon
</script>

<style scoped>
	.box {
		z-index: 10000;
	}

	.kuang {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 200rpx;
		height: 200rpx;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 20rpx;
	}

	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.loading {
		width: 64rpx;
		height: 64rpx;
		animation: rotate 2s linear infinite;
	}

	.text {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}
</style>